<template>
  <div>
    <product-module></product-module>
    <div class="product-center">
      <div class="subtitle"><span>{{ $t('navbar.product') }}</span><!-- <span>&nbsp;&gt;&nbsp;{{productName}}</span> --></div>
      <!-- 手机端二级导航栏 -->
      <div class="phone-only phone-nav" v-if="type == 6 || type == 7">
        <div class="nav-2" :class="{active: currentPage('product-center/6')}"><router-link to='/product-center/6'>{{ $t('productList[0]') }}</router-link></div>
        <div class="nav-2" :class="{active: currentPage('product-center/7')}"><router-link to='/product-center/7'>{{ $t('productList[1]') }}</router-link></div>
      </div>
      <!-- 手机端 -->
      <div class="product-list" v-if="productList[type]">
        <product-item v-for="(item, index) in productList[type]" :key="index" :info="item"></product-item>
      </div>
    </div>
  </div>
</template>

<script>
  import productItem from 'COMPS/product-item.vue'
  import productModule from 'COMPS/product-module.vue'

  export default {
    name: 'product-center',
    components: {
      productItem,
      productModule
    },
    data() {
      return {
        productList: []
      }
    },
    mounted() {
      // this.productName();
      this.getProductList();
    },
    computed: {
      type: function(){
        return this.$route.params.type;
      },
      productName: function() {
        switch(Number(this.type)) {
          case 1: 
            return '雷达物位计';
            break;
          case 2: 
            return '超声波液位计';
            break;
          case 3: 
            return '电动执行机构';
            break;
          case 4: 
            return '流量计';
            break;
          case 5: 
            return '二次仪表';
            break;
        }
      }
    },
    watch: {
      type() {
        if (this.type == 'undefined') {
          return;
        }
        this.getProductList();
      }
    },
    methods: {
      currentPage(index) {
        return -1<this.$route.path.indexOf(index) || -1<location.href.indexOf(index);
      },
      getProductList() {
        if(this.productList[this.type]) {
          return;
        }
        if(this.type == 'undefined') {
          return;
        }
        let that = this;
        if (window.DEBUGGING) {
          return new Promise((resolve) => {
            resolve([{"type":1,"pId":42,"name":"BHR90\u7cfb\u5217\u7ecf\u6d4e\u578b\u96f7\u8fbe\u7269\u4f4d\u8ba1","goods_sn":"BHR90\u7cfb\u5217","goods_type":"\u82f1\u56fdBIOEA","goods_cate":"BIOEA\u96f7\u8fbe\u7269\u4f4d\u8ba1","price":"14000.00","formal_price":"14000.00","stock":9,"goods_sell_num":1,"cover":"https:\/\/www.zjhzzdh.cn\/upload\/goods\/20181101\/ecb35b671b6081c8ded633b80b90fb25.png","describe":"\u5e94       \u7528\uff1a\u56fa\u4f53\uff0c\u5e38\u6e29\uff0c\u5e38\u538b\u5bb9\u5668\u3002<br \/>\n\u91cf       \u7a0b : 15m;<br\/>\u6d4b\u91cf\u7cbe\u5ea6\uff1a\u00b110mm <br \/>\n\u8fc7\u7a0b\u6e29\u5ea6\uff1a(-40\uff5e80)\u00b0C\uff0c (-40\uff5e120)\u00b0C \uff0c (-60\uff5e250)\u00b0C<br \/>\n\u8fc7\u7a0b\u538b\u5f3a\uff1a\u5e38\u538b\uff0c(-0.1\uff5e4)Mpa<br \/>\n\u9891       \u7387\uff1a26GHz<br \/>\n\u4fe1\u53f7\u8f93\u51fa\uff1a(4\uff5e20)mA\/HART<br \/>\n\u7535       \u6e90\uff1a\u4e24\u7ebf\u5236(DC24V\uff09\uff0c \u56db\u7ebf\u5236(DC24V\/AC220V)","comment_num":0,"goods_points":"1600.00"},{"type":1,"pId":41,"name":"BHR80\u7cfb\u5217\u7ecf\u6d4e\u578b\u96f7\u8fbe\u7269\u4f4d\u8ba1","goods_sn":"BHR80\u7cfb\u5217","goods_type":"\u82f1\u56fdBIOEA","goods_cate":"BIOEA\u96f7\u8fbe\u7269\u4f4d\u8ba1","price":"15000.00","formal_price":"15000.00","stock":9,"goods_sell_num":1,"cover":"https://www.zjhzzdh.cn/upload/goods/20181029/55efd56889c7d83cdec95a5caf6c6f9e.png","describe":" \u5e94       \u7528\uff1a\u56fa\u4f53\uff0c\u5b58\u50a8\u5bb9\u5668\uff0c\u5f3a\u7c89\u5c18\u7ed3\u6676\u7ed3\u9732\u573a\u5408\u3002<br \/>\n\u91cf       \u7a0b : 70m;<br\/>\u6d4b\u91cf\u7cbe\u5ea6\uff1a\u00b115mm <br \/>\n\u8fc7\u7a0b\u6e29\u5ea6\uff1a(-40\uff5e80)\u00b0C\uff0c (-40\uff5e120)\u00b0C\uff0c (-60\uff5e250)\u00b0C\uff0c (-60\uff5e400)\u00b0C<br \/>\n\u8fc7\u7a0b\u538b\u5f3a\uff1a\u5e38\u538b\uff0c(-0.1\uff5e4)Mpa<br \/>\n\u9891       \u7387\uff1a26GHz<br \/>\n\u4fe1\u53f7\u8f93\u51fa\uff1a(4\uff5e20)mA\/HART<br \/>\n\u7535       \u6e90\uff1a\u4e24\u7ebf\u5236(DC24V\uff09\uff0c \u56db\u7ebf\u5236(DC24V\/AC220V)","comment_num":0,"goods_points":"1800.00"},{"type":2,"pId":40,"name":"BHR60\u7cfb\u5217\u7ecf\u6d4e\u578b\u96f7\u8fbe\u7269\u4f4d\u8ba1","goods_sn":"BHR60\u7cfb\u5217","goods_type":"\u82f1\u56fdBIOEA","goods_cate":"BIOEA\u96f7\u8fbe\u7269\u4f4d\u8ba1","price":"12000.00","formal_price":"12000.00","stock":10,"goods_sell_num":0,"cover":"https:\/\/www.zjhzzdh.cn\/upload\/goods\/20181101\/740ac785c8e783b2070dea2ca93d7d4c.png","describe":"\u5e94       \u7528\uff1a\u6db2\u4f53\uff0c\u8010\u6e29\uff0c\u8010\u538b\uff0c\u8f7b\u5fae\u8150\u8680\u6027\u6db2\u4f53\u3002<br \/>\n\u91cf       \u7a0b : 30m;<br \/>\n\u6d4b\u91cf\u7cbe\u5ea6\uff1a\u00b13mm<br \/>\n\u8fc7\u7a0b\u6e29\u5ea6\uff1a(-40\uff5e80)\u00b0C\uff0c (-40\uff5e130)\u00b0C\uff0c (-60\uff5e250)\u00b0C\uff0c (-60\uff5e400)\u00b0C<br \/>\n\u8fc7\u7a0b\u538b\u5f3a\uff1a\u5e38\u538b\uff0c(-0.1\uff5e4)Mpa\uff0c(-0.1\uff5e40)Mpa<br \/>\n\u9891       \u7387\uff1a26GHz<br \/>\n\u4fe1\u53f7\u8f93\u51fa\uff1a(4\uff5e20)mA\/HART<br \/>\n\u7535       \u6e90\uff1a\u4e24\u7ebf\u5236(DC24V\uff09\uff0c\u56db\u7ebf\u5236(DC24V\/AC220V)  ","comment_num":0,"goods_points":"1200.00"},{"type":1,"pId":39,"name":"BHR50\u7cfb\u5217\u7ecf\u6d4e\u578b\u96f7\u8fbe\u7269\u4f4d\u8ba1","goods_sn":"BHR50\u7cfb\u5217","goods_type":"\u82f1\u56fdBIOEA","goods_cate":"BIOEA\u96f7\u8fbe\u7269\u4f4d\u8ba1","price":"11500.00","formal_price":"11500.00","stock":10,"goods_sell_num":0,"cover":"https:\/\/www.zjhzzdh.cn\/upload\/goods\/20181101\/3c5cbedd9c75be1e8be19d4db022a216.png","describe":"\u5e94       \u7528\uff1a\u6db2\u4f53\uff0c\u9002\u5408\u5f3a\u8150\u8680\u6027\u6db2\u4f53<br \/>\n\u91cf       \u7a0b : 10m; (\u5587\u53ed80mm\uff09<br \/>\n\u6d4b\u91cf\u7cbe\u5ea6\uff1a\u00b15mm <br \/>\n\u8fc7\u7a0b\u6e29\u5ea6\uff1a(-40\uff5e130)\u00b0C<br \/>\n\u8fc7\u7a0b\u538b\u5f3a\uff1a(-0.1\uff5e0.3)MPa<br \/>\n\u9891       \u7387\uff1a26GHz<br \/>\n\u4fe1\u53f7\u8f93\u51fa\uff1a(4\uff5e20)mA\/HART<br \/>\n\u7535       \u6e90\uff1a\u4e24\u7ebf\u5236(DC24V)\uff0c \u56db\u7ebf\u5236(DC24V\/AC220V)","comment_num":0,"goods_points":"1200.00"}])
          }).then((res) => {
            // that.productList = res;
            // that.productList[that.type] = res;
            that.$set(that.productList,that.type,res)
          })
        }
        
        this.$axios.get('/pc.php/goods/goodsList', {
          params: {
            goods_cate: that.type,
            page: 1
          }
        }).then((res) => {
            let _data = res.data.map((e, i) => {
              return {
                cover: e.goods_img,
                name: e.goods_name,
                price: e.price,
                type: that.type,
                pId: e.goods_id
              }
            })

            that.$set(that.productList,that.type,_data)
          })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .product-center {
    display: inline-block;
    vertical-align: top;
    width: 880px;
    margin-left: 25px;
    .phone-nav {
      .nav-2 {
        display: inline-block;
        margin-top: 20px;
        min-width: 120px;
        line-height: 34px;
        margin-right: 15px;
        text-align: center;
        color: #666;
        border: solid 1px #dcdcdc;
        &.active {
          >a{color: #fff;}
          background-color: #339186;
        }
      }
    }
    .product-list {
      text-align: left;
      margin-top: 30px;
      .product-item {
        margin-bottom: 25px;
        margin-right: 35px;
        &:nth-of-type(3n) {
          margin-right: 0px;
        }
      }
      .On-xs({
        .product-item {
          margin: 0px;
          &:nth-of-type(2n-1) {
            margin-right: 20px;
            margin-bottom: 25px;
          }
        }
      });
      @media (max-width: 360px) {
        .product-item {
          &:nth-of-type(2n-1) {
            margin-right: 10px;
          }
        }
      }
    }
  }
</style>